<%@ page import="com.ant.myagile.Team"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="template" />
<link rel="stylesheet" type="text/css" href="<g:resource dir="css" file="main.css" absolute="true" />"/>

<title>TEAM DETAILS</title>

<script>
	$(function() {
		$( "#establishedDate" ).datepicker({ dateFormat: 'yyyy-MM-dd' });
		$( "#establishedDate1" ).datepicker({ dateFormat: 'yyyy-MM-dd' });		
	});

</script>

<%--PhucHieu load team use ajax--%>
<script type="text/javascript">
function changeTeam(){
	$.ajax({
		url: "${g.createLink(controller:'team',action:'memberOfTeam')}",
		data: {
			teamName:$('#selectteam').val()
		},
		cache: false,
		success: function(data){
		   $('#detail').html(data);
		}
    });
}
$(document).ready( function() {
	
	changeTeam();
	$('#selectteam').change(function() {changeTeam();		
		});
})
</script>

<%--End of loadteam--%>
<style type="text/css">
.team-members .member-avatar .darken {
	display: inline-block;
	background: black;
	padding: 0;
	max-width: 100%;
}

.removeMember {
	z-index: 99999;
	opacity: 1;
}

#removeMemberTemplate {
	display: none;
}
</style>
</head>
<body>

	<div style="clear: both"></div>

	
	<form class="team-select" >
	<g:if test="${teams}">
				Select a team
				<g:select name="id" id="selectteam" from="${teams}" optionKey="id" optionValue="teamName" value="${team.id}" />
				</g:if>
				
				
			<g:set var="breaks" value="${true}"/>
			<g:each in= "${roles}" var= "role">
				<g:if test="${role == "ROLE_USER" && breaks == true}">
					<a style="width: 121px;display:inline;" id="cr-team" href="#" class="btn btn-info input-block-level text-left"><i class="icon-plus-sign icon-right-spacing"></i>New Team </a>
					<g:set var="breaks" value="${false}"/>
				</g:if>
			</g:each>
		
	</form>
	
	<script type="text/javascript">
	</script>
<form class="infor offset1">


		<div id="detail" ></div>
	
		
		</form>
	
	
	<%-- Remove Project From Team--%>
	<div id="delete-project-modal" class="modal hide fade" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">Ã—</button>
			<h3 id="myModalLabel">Notice</h3>
		</div>
		<div class="modal-body">
			<p>Are you sure to remove this project in team?</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="button" id="btnDeleteProject" class="btn btn-primary"
				data-loading-text="Processing...">OK</button>
		</div>
	</div>
	<%--End remove project --%>
	<%--DELETE FORM --%>
	<div id="delete-modal" class="modal hide fade" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">x</button>
			<h3 id="myModalLabel">Notice</h3>
		</div>
		<div class="modal-body">
			<p>Are you sure to remove this project from system?</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="button" id="btnDeleteTeam" class="btn btn-primary"
				data-loading-text="Processing...">OK</button>
		</div>
	</div>

	<%--END DELETE --%>
	<%--CREATE FORM --%>

	<div id="create_modal" class="modal hide fade" tabindex="-1"
		style="width: 600px; height: auto; margin-left: -300px;" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<g:uploadForm name="myTeamCreate" controller="team" action="saveTeam"
			method="post" onSubmit="">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Create New Team</h3>
			</div>
			<div class="modal-body">
				<table class="table table-bordered table-striped">
					<tr>
						<td>Logo</td>
						<td><input type="file" name="image" id="image1"
							class="input-block-level"
							style="background-color: #fcfcfc; border: 1px solid #cccccc;"
							 size="45px;" /></td>
					</tr>
					<tr>
						<td>Team Name (*):</td>
						<td><input type="text" style="width: 370px;" name="teamName"
							id="teamName1"  placeholder="Team Name"
							class="input-block-level" /></td>
					</tr>
					<tr>
						<td>Group Mail (*)</td>
						<td><g:field type="email" style="width: 370px;"
								name="mailGroup" id="mailGroup1" 
								placeholder="Mail Group" class="input-block-level" />
					</tr>
					<tr>
						<td>Description</td>
						<td><g:textArea name="description"
								style='width: 370px; height: 50px;' placeholder="Description"
								id="description1" rows="5" cols="20" class="input-block-level" /></td>
					</tr>
					<tr>
						<td>Established Date</td>
						<td><input type="text" id="establishedDate"
							data-date-format="yyyy-mm-dd" name="establishedDate"
							style="width: 370px;" readonly="readonly"  /></td>

					</tr>
				</table>
				<div id="projectList">
					<table class="table table-bordered table-striped">
						<thead>
							<tr>
								<th style="text-align: center;"><input type="checkbox"
									id="checkAll1" /></th>
								<th style="text-align: center;">Project Name</th>

							</tr>
						</thead>
						<g:each var="project" in="${projects}">
							<tr>
								<td style="text-align: center;"><g:checkBox
										name="myCheckbox" class="classCheckbox" value="${project.id}"
										checked="false" /></td>
								<td style="text-align: center;">
									${project.projectName}
								</td>
							</tr>
						</g:each>
					</table>
				</div>
			</div>
			<div class="modal-footer">
				<g:submitButton name="createTeam" class="btn btn btn-primary"
					value="Create" id="submitCreateTeam"/>
				<button class="btn btn btn-primary" data-dismiss="modal"
					aria-hidden="true" id="cancel">Cancel</button>
			</div>
			
		</g:uploadForm>
	</div>
	<%--End Create Form --%>
	<%--UPDATE FORM --%>
	<div id="update_modal" class="modal hide fade" tabindex="-1"
		style="width: 750px; height: auto; margin-left: -300px;" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<g:uploadForm name="myTeamUpdate" id="form-edit" controller="team"
			action="updateTeam" method="post" onSubmit="return validateUd();">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Update Team</h3>
			</div>
			<div class="pull-left">
				<img id="dimage" width="150px;" height="150px;"
					class="media-object img-polaroid" alt="images" src="">
			</div>
			<div class="modal-body">
				<g:hiddenField name="teamId" id="teamId2" />
				<table class="table table-bordered table-striped">
					<tr>
						<td>Logo</td>
						<td><input type="file" name="image" id="image"
							class="input-block-level"
							style="background-color: #fcfcfc; border: 1px solid #cccccc;"
							size="45px;" /></td>
					</tr>
					<tr>
						<td>Team Name (*):</td>
						<td><input type="text" style="width: 370px;" name="teamName"
							id="teamName" required placeholder="Team Name"
							class="input-block-level" value="${team?.teamName}" /></td>
					</tr>
					<tr>
						<td>Group Mail (*)</td>
						<td><g:field type="email" style="width: 370px;"
								name="mailGroup" id="mailGroup" required=""
								placeholder="Mail Group" class="input-block-level" /></td>
					</tr>
					<tr>
						<td>Description</td>
						<td><g:textArea name="description" id="description"
								style='width: 370px; height: 50px;' placeholder="Description"
								value="${team?.description}" rows="5" cols="40"
								class="input-block-level" /></td>
					</tr>
					<tr>
						<td>Established Date</td>
						<td><input type="text" id="establishedDate1"
							data-date-format="yyyy-mm-dd" style='width: 370px;'
							name="establishedDate" readonly="readonly" /></td>
					</tr>
				</table>

				<div id="projectList">
					<table class="table table-bordered table-striped">
						<thead>
							<tr>
								<th style="text-align: center;"><input type="checkbox"
									id="checkAll" /></th>
								<th style="text-align: center;">Project Name</th>

							</tr>
						</thead>
						<g:each var="project" in="${projects}">
							<tr>
								<td style="text-align: center;"><g:checkBox
										name="myCheckbox" class="classCheckbox" value="${project.id}"
										checked="false" /></td>
								<td style="text-align: center;">
									${project.projectName}
								</td>
							</tr>

						</g:each>
					</table>
				</div>
			</div>
			<div class="modal-footer">
				<g:submitButton name="updateTeam" class="btn btn btn-primary"
					value="Update" id="submitUpdateTeam"/>
				<input type="button" class="btn btn btn-primary"
					data-dismiss="modal" aria-hidden="true" id="cancel1" value="Cancel" />
			</div>
		</g:uploadForm>
	</div>
	<%--End update form --%>

	<div id="removeMemberTemplate">
		<div class="removeMember">
			<button class="btn btn-info btnRemoveMember">
				<i class="icon-remove"></i>Remove
			</button>
		</div>
	</div>
<%----create team	--%>
	<script type="text/javascript">
	
	$(function(){
		$('a[id="cr-team"]').on("click", function(){
			$("input[id='checkAll1']").attr("checked",false);
			$("input[name='myCheckbox']").attr("checked",false);
			$.ajax({
				url: '${g.createLink(controller: 'team', action: 'addTeam')}',					
				dataType: 'json',
				data: {},
				success: function(data){
					}
				});
			$('#create_modal').modal("show");
	});		

	$('#submitCreateTeam').click(function(){
		$('#myTeamCreate').validate({
			rules: {
				teamName: {
					required: true
				},
				mailGroup: {
					required: true,
					email: true 
				},
				image: {
					accept: "png|jpeg|gif|jpg",
					filesize: 1048576
				}
			},
			messages: {
				teamName: {
					required: "<div class='alert alert-error'>Please enter your Team Name</div>"
				},
				mailGroup:{ 
					required:"<div class='alert alert-error'>Please enter your mail group</div>",
					email: "<div class='alert alert-error'>Email not valid</div>"
				},
				image:{
					required:"<div class='alert alert-error'>No blank!</div>",
					accept: "<div class='alert alert-error'>File must be JPG,JPEG, GIF or PNG</div>",
					filesize: "<div class='alert alert-error'>File must less than 1MB</div>"
					}
			},
			submitHandler: function(form)
             {
                form.submit();
             }
		});
			
	});
	
	$('#submitUpdateTeam').click(function(){
		$('#myTeamUpdate').validate({
			rules: {
				teamName: {
					required: true
				},
				mailGroup: {
					required: true,
					email: true 
				},
				image: {
					accept: "png|jpeg|gif|jpg",
					filesize: 1048576
				}
			},
			messages: {
				teamName: {
					required: "<div class='alert alert-error'>Please enter your Team Name</div>"
				},
			
				mailGroup:{ 
					required:"<div class='alert alert-error'>Please enter your mail group</div>",
					email: "<div class='alert alert-error'>Email not valid</div>"
				},
				image:{
					required:"<div class='alert alert-error'>No blank!</div>",
					accept: "<div class='alert alert-error'>File must be JPG,JPEG, GIF or PNG</div>",
					filesize: "<div class='alert alert-error'>File must less than 1MB</div>"
					}
			},
			submitHandler: function(form)
             {
                form.submit();
             }
		});
			
	});
});
	</script>
</body>
</html>